<template>
  <div>
    <TitleSecondary title="产品" :icon="icon" @change="handleChangeIcon" />
    <div v-show="icon === 'up'" class="log-container">
      <p-table
        class="table-list-container"
        row-key="id"
        :scroll="{ x: '100%' }"
        :columns="columns"
        bordered
        :pagination="false"
        :data-source="dataSource"
        v-bind="$attrs"
        v-on="$listeners"
      >
        <a
          slot="product.productNo"
          slot-scope="text, record"
          @click="handleNumberClick(record)"
        >
          {{ text }}
        </a>
      </p-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataSource: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      icon: 'down',
    };
  },
  computed: {
    stateOptions() {
      return this.$store.state.dictionary.dict['product_status'] || {};
    },
    typeOptions() {
      return this.$store.state.dictionary.dict['product_type'] || {};
    },
    formOptions() {
      return this.$store.state.dictionary.dict['product_from'] || {};
    },
    coverOptions() {
      return this.$store.state.dictionary.dict['product_cover'] || {};
    },
    screenOptions() {
      return this.$store.state.dictionary.dict['product_screen'] || {};
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '产品名称',
          width: 160,
          ellipsis: true,
          dataIndex: 'product.name',
          scopedSlots: { customRender: 'product.productNo' },
        },
        {
          align: 'center',
          title: '产品类型',
          width: 160,
          ellipsis: true,
          dataIndex: 'product.type',
          customRender: text => this.typeOptions[text],
        },
        {
          align: 'center',
          title: '机种',
          width: 160,
          ellipsis: true,
          dataIndex: 'product.modelName',
        },
        {
          align: 'center',
          title: '出货形态',
          width: 100,
          ellipsis: true,
          dataIndex: 'product.form',
          customRender: text => this.formOptions[text],
        },
        {
          align: 'center',
          title: '尺寸',
          width: 100,
          ellipsis: true,
          dataIndex: 'product.size',
        },
        {
          align: 'center',
          title: '技术别',
          width: 100,
          ellipsis: true,
          dataIndex: 'product.technology',
        },
        {
          align: 'center',
          title: '分辨率',
          width: 100,
          ellipsis: true,
          dataIndex: 'product.resolution',
        },
        {
          align: 'center',
          title: 'Bonding',
          width: 100,
          ellipsis: true,
          dataIndex: 'product.bonding',
        },
        {
          align: 'center',
          title: 'Notch',
          width: 100,
          ellipsis: true,
          dataIndex: 'product.notch',
        },
        {
          align: 'center',
          title: '刷新率',
          width: 100,
          ellipsis: true,
          dataIndex: 'product.refreshRate',
        },
        {
          align: 'center',
          title: '亮度',
          width: 100,
          ellipsis: true,
          dataIndex: 'product.brightness',
        },
        {
          align: 'center',
          title: '屏幕类型',
          width: 100,
          ellipsis: true,
          dataIndex: 'product.screenType',
          customRender: text => this.screenOptions[text],
        },
        {
          align: 'center',
          title: 'CG盖板',
          width: 100,
          ellipsis: true,
          dataIndex: 'product.cover',
          customRender: text => this.coverOptions[text],
        },
      ];
      return columns;
    },
  },
  created() {},
  methods: {
    handleChangeIcon(icon) {
      this.icon = icon === 'down' ? 'up' : 'down';
    },
    // 编号点击
    handleNumberClick(record) {
      this.$router.push({
        path: '/product-info',
        query: {
          id: record.product.id,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.table-list-container {
  margin-top: 20px;
  margin-bottom: 40px;
}
</style>
